<style>
    @media(max-width:768px) {
        html{
            padding-top: 100vh;
        }
    }
</style>
<!--  / warpper  -->
<main class="warpper">

    {notempty name="$season_show"}
    <!-- 秋冬展示 -->
    <div class="indSec1">
        <div class="indSec1_con">
            {foreach $season_show as $row}
            <a class="indSec1_box" href="{:url('index/index/show')}?id={$row.id}">
                <video class="indSec1_video" muted width="100%">
                    <source src="__CDN__{$row.video}" type="video/mp4">
                </video>
                <div class="indSec1_img" style="background: url(__CDN__{$row.image}) center/cover no-repeat;"></div>
                <div class="indSec1_txt">
                    <p>{$row.name}</p>
                </div>
            </a>
            {/foreach}
        </div>
    </div>
    {/notempty}

    {notempty name="$advertising_index"}
    <!-- 形象广告 -->
    <div class="indSec2">
        <div class="container">
            <div class="indSec2_con">
                <!-- 左侧文字、分类 -->
                <div class="indSec2_txt">
                    <h6>IMAGE</h6>
                    <h6>advertising</h6>
                    <h5>形象广告</h5>
                    {foreach $advertising_index as $row}
                    <p>
                        <a href="{:url('index/index/advertising')}?id={$row.id}">{$row.name}</a>
                    </p>
                    {/foreach}
                </div>
                <!-- 右侧图片上下滚动 -->
                <div class="indSec2_right">
                    {foreach $advertising_index as $key => $row}
                    {if $key == 0}
                    <div class="swiper-container indSec2_swiper">
                        <div class="swiper-wrapper">
                            {foreach $row.images2 as $images2}
                            <div class="swiper-slide">
                                <div class="indSec2_img">
                                    <div class="indSec2_imgBox"
                                         style="background: url({$images2}) center top/cover no-repeat;"></div>
                                </div>
                            </div>
                            {/foreach}
                        </div>
                    </div>
                    {/if}
                    {if $key == 1}
                    <div class="swiper-container indSec2_swiper2">
                        <div class="swiper-wrapper">
                            {foreach $row.images2 as $images2}
                            <div class="swiper-slide">
                                <div class="indSec2_img">
                                    <div class="indSec2_imgBox"
                                         style="background: url({$images2}) center top/cover no-repeat;"></div>
                                </div>
                            </div>
                            {/foreach}
                        </div>
                    </div>
                    {/if}
                    {/foreach}
                </div>
            </div>
        </div>
    </div>
    {/notempty}

    {notempty name="$product_images"}
    <!-- 最新单品 -->
    <div class="indSec3">
        <div class="swiper-container indSec3_swiper">
            <div class="swiper-wrapper">
                {foreach $product_images as $row}
                <div class="swiper-slide">
                    <a class="indSec3_box" href="{:url('index/index/product')}?id={$row.new_product_id}">
                        <div class="indSec3_img">
                            <div class="indSec3_imgBox grid__img--example-4">
                                <!-- data-tile-options是图片效果属性不要删除、底部引入的tiltfx.js不要缺失不然图片会空白 -->
                                <img src="__CDN__{$row.image}" class="tilt-effect" alt="grid04"
                                     data-tilt-options='{ "opacity" : 1, "bgfixed" : false, "extraImgs" : 3, "movement": { "perspective" : 1500, "translateX" : 60, "translateY" : 60, "translateZ" : 0, "rotate" : 20 } }'/>
                            </div>
                        </div>
                        <!-- <div class="indSec3_img">
                            <div class="indSec3_imgBox" style="background: url(__CDN__/static/images/indSec3_img01.jpg) center top/cover no-repeat;"></div>
                        </div> -->
                        <div class="indSec3_txt">
                            <p>{$row.name}</p>
                        </div>
                    </a>
                </div>
                {/foreach}
            </div>
        </div>
    </div>
    {/notempty}

    <!-- 关于我们 -->
    <div class="indSec4">
        <div class="indSec4_logo">
            <img src="__CDN__/static/images/logo2.png" alt="">
        </div>
        <div class="indSec4_con">
            <div class="indSec4_video">
<!--                <video class="indSec1_video" controls reload width="100%" poster="__CDN__/static/images/indSec4_img.jpg">-->
                <video class="indSec1_video" controls reload width="100%">
                    <source src="__CDN__{$about_config.index_video}" type="video/mp4">
                </video>
                <div class="videoPlay">
                    <img src="__CDN__/static/images/play2.png" alt="">
                </div>
            </div>
            <div class="indSec4_txt">
                {$about_config.index_content}
                <div class="publicMore indSec4_more">
                    <a href="{:url('index/index/about')}">view more</a>
                </div>
            </div>
        </div>
    </div>

    <!-- 终端店铺 -->
    <div class="indSec5" style="background: url(__CDN__{$shop_config.image}) center top/cover no-repeat;">
        <div class="indSec5_txt">
            <h6>{$shop_config.name}</h6>
            <p>{$shop_config.string}</p>
            <div class="publicMore white indSec5_more">
                <a href="{:url('index/index/shop')}">View More</a>
            </div>
        </div>
    </div>

</main>
<!--  / warpper  -->

<script>
    $(function () {

        var bannerVideo = document.getElementById("bannerVideo");
        bannerVideo.addEventListener('ended', function () { //结束
            indSwiper.slideNext();
        }, false);
        // banner轮播图
        var indSwiper = new Swiper('.indSwiper', {
            // loop: true,
            speed: 1500,
            observer: true,
            observeParents: true,
            breakpoints: {
                768: {
                    loop: true,
                },
            },
            onSlideChangeEnd: function(swiper){
                console.log(swiper.activeIndex) //切换结束时，告诉我现在是第几个slide
                if (swiper.activeIndex != 0) {
                    if (swiper.activeIndex < $('.indSwiper .swiper-slide').length - 1) {
                        setTimeout(function(){
                            indSwiper.slideNext();
                        },5000)
                    }else{
                        setTimeout(function(){
                            indSwiper.slidePrev();
                        },5000)
                    }
                }else{
                    $('#bannerVideo').trigger('play');
                }
            }
        })

        // 秋冬展示鼠标悬浮播放视频
        $('.indSec1_box').hover(function () {
            $(this).find('video').trigger('play');
        }, function () {
            $(this).find('video').trigger('pause');
        })

        // 形象广告轮播一
        var indSec2_swiper = new Swiper('.indSec2_swiper', {
            loop: true,
            direction: 'vertical',
            freeMode: true,
            speed: 8000,
            autoHeight: true,
            observer: true,
            observeParents: true,
            autoplay: true,
            disableOnInteraction: true,
            slidesPerView: 'auto',
            spaceBetween: 30,
            slidesOffsetBefore: 300,
            simulateTouch: false,
        })
        // 鼠标悬浮停止轮播、移开恢复轮播
        $('body').on('mouseover', '.indSec2_swiper', function () {
            indSec2_swiper.setWrapperTranslate(indSec2_swiper.getWrapperTranslate());
            indSec2_swiper.stopAutoplay();
        })
        $('body').on('mouseleave', '.indSec2_swiper', function () {
            indSec2_swiper.startAutoplay();
            indSec2_swiper.setWrapperTranslate(indSec2_swiper.getWrapperTranslate() - 500);
        })
        // 形象广告轮播二
        var indSec2_swiper2 = new Swiper('.indSec2_swiper2', {
            loop: true,
            direction: 'vertical',
            freeMode: true,
            speed: 10000,
            autoHeight: true,
            observer: true,
            observeParents: true,
            autoplay: true,
            disableOnInteraction: true,
            slidesPerView: 'auto',
            spaceBetween: 30,
            simulateTouch: false,
        })
        // 鼠标悬浮停止轮播、移开恢复轮播
        $('body').on('mouseover', '.indSec2_swiper2', function () {
            indSec2_swiper2.setWrapperTranslate(indSec2_swiper2.getWrapperTranslate());
            indSec2_swiper2.stopAutoplay();
        })
        $('body').on('mouseleave', '.indSec2_swiper2', function () {
            indSec2_swiper2.startAutoplay();
            indSec2_swiper2.setWrapperTranslate(indSec2_swiper2.getWrapperTranslate() - 600);
        })

        // 最新单品轮播
        var indSec3_swiper = new Swiper('.indSec3_swiper', {
            // loop: true,
            speed: 2000,
            observer: true,
            observeParents: true,
            autoplay: 5000,
            autoplayDisableOnInteraction: false,
            slidesPerView: 3,
            slidesPerGroup: 3,
            spaceBetween: 0,
            // breakpoints: {
            //     768: {
            //         speed: 1000,
            //         autoplay: 3000,
            //         slidesPerView: 1,
            //         slidesPerGroup: 1,
            // 		spaceBetween : 0,
            //     },
            // }
        })

        // 关于我们鼠标点击播放视频
        $('body').on('click', '.indSec4_video', function () {
            $(this).toggleClass('play');
            if ($(this).hasClass('play')) {
                $(this).find('video').trigger('play');
            } else {
                $(this).find('video').trigger('pause');
            }
        })

    })

    $(window).ready(function () {
        $('.headerNav:first-child li').eq(0).addClass('on');
    })
    $(window).load(function () {
        // if ($(window).width() <= 768) {
        //     $('.indSec1,.indSec2').addClass('on');
        // }
    })
    $(window).resize(function () {

    })

    $(window).scroll(function () {
        var h = $(window).scrollTop()


    })

</script>